<template>
  <div class="map-page">
    <img class="img-bg" src="@/assets/cockpit/subdivision/co-map-3-1.jpg" alt="" />
    <div class="map-left-menu">
      <div class="co-title-select">
        <el-select v-model="selectedValue" placeholder="请选择" :popper-append-to-body="false">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
      </div>
      <!-- <ul class="co-menu-list">
        <li v-for="item in menuList" :key="item.id">{{ item.name }}</li>
      </ul> -->
    </div>

    <div class="map-right-menu-top">
      <div class="item-area item-top">
        <div class="left">
          <img src="@/assets/cockpit/subdivision/co-icon-fgl.png" alt="" />
          <!-- <img src="@/assets/cockpit/subdivision/co-icon-zmj.png" alt=""/> -->
          <div class="title">年度新增建设用地指标剩余：</div>
        </div>

        <div class="right">
          20.15
          <span>%</span>
          <el-popover placement="top-start" width="220" trigger="hover">
            <ul class="bb4-leb-box">
              <li>指标总量：593.19公顷</li>
              <li>已使用：473.66公顷</li>
              <li>剩余：119.53公顷</li>
            </ul>
            <i class="bb4-leb-ask" slot="reference"></i>
          </el-popover>
        </div>
      </div>
      <div class="line"></div>
      <div class="item-area">
        <div class="left">
          <img src="@/assets/cockpit/subdivision/co-icon-zmj.png" alt="" />
          <div class="title">增减挂钩节余建设用地指标剩余：</div>
        </div>

        <div class="right">
          20.15
          <span>%</span>
          <el-popover placement="top-start" width="220" trigger="hover">
            <ul class="bb4-leb-box">
              <li>指标总量：593.19公顷</li>
              <li>已使用：473.66公顷</li>
              <li>剩余：119.53公顷</li>
            </ul>
            <i class="bb4-leb-ask" slot="reference"></i>
          </el-popover>
        </div>
      </div>
    </div>

    <div class="map-right-menu" :class="!isFold ? 'map-right-menu-no' : ''">
      <div class="title-area">
        <div class="left">建设用地审批情况</div>
        <div class="right">单位：公顷</div>
        <div class="title-btn" :class="{ extend: !isFold, fold: isFold }" @click="isFold = !isFold"></div>
      </div>
      <div class="list-header" v-show="isFold">
        <p>行政区</p>
        <p>总面积</p>
        <p>农用地转用面积</p>
        <p>未利用地转用面积</p>
      </div>
      <ul class="list-item" v-show="isFold">
        <!--  -->
        <li v-for="(item, index) in listData" :key="index">
          <div class="name">
            {{ item.name }}
            <div class="before"></div>
          </div>
          <div class="length">{{ item.num1 }}</div>
          <div class="des">{{ item.num2 }}</div>
          <div class="des">{{ item.num3 }}</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'

@Component({
  name: 'MapMenu',
  components: {}
})
export default class MapMenu extends Vue {
  private isFold = true
  private selectedValue = 1
  private options = [
    {
      value: 1,
      label: '建设用地审批一张图'
    },
    {
      value: 2,
      label: '土地储备一张图'
    },
    {
      value: 3,
      label: '土地一级市场供应一张图'
    },
    {
      value: 4,
      label: '土地二级市场供应一张图'
    },
    {
      value: 5,
      label: '违法用地一张图'
    },
    {
      value: 6,
      label: '闲置土地一张图'
    },
    {
      value: 7,
      label: '批而未供土地一张图'
    }
  ]
  listData = [
    {
      name: '长沙市',
      num1: '429.23',
      num2: '489.21',
      num3: '315.41'
    },
    {
      name: '芙蓉区',
      num1: '429.23',
      num2: '489.21',
      num3: '315.41'
    },
    {
      name: '天心区',
      num1: '429.23',
      num2: '489.21',
      num3: '315.41'
    },
    {
      name: '雨花区',
      num1: '429.23',
      num2: '489.21',
      num3: '315.41'
    },
    {
      name: '开福区',
      num1: '429.23',
      num2: '489.21',
      num3: '315.41'
    },
    {
      name: '岳麓区',
      num1: '429.23',
      num2: '489.21',
      num3: '315.41'
    },
    {
      name: '望城区',
      num1: '429.23',
      num2: '489.21',
      num3: '315.41'
    },
    {
      name: '长沙县',
      num1: '429.23',
      num2: '489.21',
      num3: '315.41'
    },
    {
      name: '宁乡市',
      num1: '429.23',
      num2: '489.21',
      num3: '315.41'
    },
    {
      name: '浏阳市',
      num1: '429.23',
      num2: '489.21',
      num3: '315.41'
    }
  ]
}
</script>
<style lang="scss" scoped>
@import '~@/styles/cockpit.scss';
.map-page {
  width: 100%;
  height: 100%;
  // background: red!important;
  background-color: #042c63;
  .img-bg {
    width: 100%;
    height: 100%;
    display: block;
  }

  .map-left-menu {
    position: absolute;
    left: 12px;
    top: 12px;
    .co-menu-list {
      width: 188.1px;
      height: 300.04px;
      background: rgba(0, 33, 96, 0.9);
      border: 1px solid #3767b6;
      margin-top: 12px;

      li {
        width: 164px;
        height: 29px;
        line-height: 29px;
        background: url('~@/assets/cockpit/co-title-select.png') no-repeat 0/ 100% 100%;
        border: none;
        font-size: 12px !important;
        color: #fff;
        padding-left: 8px;
        margin-top: 12px;
        margin-left: 12px;
      }
    }
  }

  .map-left-bottom {
    position: absolute;
    left: 8px;
    bottom: 6px;
    color: #fff;
    width: 390px;
    height: 377px;
    background: url('~@/assets/cockpit/subdivision/wq-logo-bg.png') no-repeat 0/ 100% 100%;
    .title-style {
      font-size: 14px !important;
      color: #fff;
      text-shadow: 0 0 4px #006aff;
      margin: 26px 0 0 20px;
    }
    .logo-list {
      margin: 12px;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      margin: 12px 20px;
      li {
        display: flex;
        width: 32%;
        margin-bottom: 8px;
        img {
          width: 32px;
          height: 16px;
          display: block;
        }
        p {
          line-height: 16px;
          margin-left: 4px;
          font-size: 12px !important;
        }
      }
    }
  }

  .map-right-menu {
    position: absolute;
    right: 12px;
    top: 148px;
    color: #fff;
    width: 393px;
    height: auto;
    background: url('~@/assets/cockpit/subdivision/co-map-menu-bg.png') no-repeat 0/ 100% 100%;
    .title-area {
      width: 92%;
      margin: auto;
      display: flex;
      justify-content: space-between;
      margin-top: 30px;
      overflow: hidden;
      .title-btn {
        position: relative;
        width: 24px;
        height: 24px;
        background: linear-gradient(360deg, rgba(0, 149, 255, 0.3) 0%, rgba(0, 149, 255, 0) 100%);
        border-radius: 50%;
        cursor: pointer;

        &.extend {
          &:after {
            display: block;
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('~@/assets/cockpit/cho-up-extend.png') no-repeat 0/100% 100%;
          }
        }
        &.fold {
          &:after {
            display: block;
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('~@/assets/cockpit/cho-down-fold.png') no-repeat 0/100% 100%;
          }
        }
      }
      .left {
        font-size: 16px !important;
        color: #fff;
        text-shadow: 0 0 4px #006aff;
      }
      .right {
        font-size: 12px !important;
        color: #dffeff;
      }
    }
    .list-header {
      display: flex;
      width: 92%;
      height: 21px;
      line-height: 21px;
      background: rgba(255, 255, 255, 0.1);
      color: #bffeff;
      text-align: center;
      margin: auto;
      margin-top: 12px;

      p:nth-of-type(1) {
        flex: 1;
      }
      p:nth-of-type(2) {
        flex: 1;
      }
      p:nth-of-type(3) {
        flex: 2;
      }
    }
    .list-item {
      height: 270px;
      overflow: auto;
      .list-total {
        display: flex;
        width: 92%;
        height: 21px;
        line-height: 21px;
        background: rgba(255, 255, 255, 0.05);
        margin: auto;
        margin-top: 4px;
        text-align: center;
        color: #bffeff;
        p:nth-of-type(1) {
          flex: 1;
        }
        p:nth-of-type(2) {
          flex: 3;
        }
      }
      li {
        display: flex;
        width: 92%;
        height: 21px;
        line-height: 21px;
        background: rgba(255, 255, 255, 0.05);
        margin: auto;
        margin-top: 4px;
        text-align: center;

        .name {
          flex: 1;
          position: relative;
          .before {
            position: absolute;
            left: 0;
            top: 0;
            width: 4px;
            height: 21px;
            background: #006aff;
            opacity: 0.5;
            border-right: solid 2px #002160;
          }
        }
        .length {
          flex: 1;
          text-align: right;
        }
        .des {
          flex: 2;
          text-align: right;
        }
      }
    }
  }
  .map-right-menu-no {
    height: 74px !important;
  }

  .map-right-menu-top {
    position: absolute;
    right: 12px;
    top: 12px;
    color: #fff;
    width: 393px;
    height: 130px;
    background: url('~@/assets/cockpit/subdivision/co-map-menu-bg.png') no-repeat 0/ 100% 100%;

    .item-area {
      width: 92%;
      margin: auto;
      display: flex;
      justify-content: space-between;

      .left {
        display: flex;
        img {
          width: 32px;
          height: auto;
          display: block;
        }
        .title {
          font-size: 16px !important;
          color: #dffeff;
          margin-top: 6px;
        }
      }

      .right {
        font-size: 20px !important;
        color: #fff;
        margin-top: 4px;
        span {
          font-size: 12px !important;
          position: relative;
          padding-right: 6px;
          .bb4-leb-ask {
            width: 24px;
            height: 24px;
            background: url('~@/assets/cockpit/bb4-leb-ask.png') no-repeat center center/ 37px 37px;
            position: absolute;
            bottom: -5px;
            right: -12px;
            z-index: 5;
            cursor: pointer;
          }
        }
      }
    }
    .item-top {
      margin-top: 24px;
    }
    .line {
      width: 92%;
      height: 1px;
      background: rgba(255, 255, 255, 0.1);
      margin: 12px auto 12px auto;
    }
  }
}
</style>
